<template>
	<view class="Record">
		<view class="Record-1">
			<text>{{risk.riskResult}}</text>
		</view>
		<view class="Record-2">
			<view class="Record-2-1" v-for="item in data" :key="item">
				<view class="WZ-1">
					<text>{{item}}</text>
				</view>
				<view class="JD-2">
					<progress :percent="index" stroke-width="10" activeColor="#3775f6" :border-radius="25"
						backgroundColor="#cccccc" />
				</view>
			</view>
		</view>
		<view class="Record-3">
			<view class="box-1">
				<text>"</text>
			</view>
			<view class="box-2">
				<text>稳中有进,适合投资低至中风险产品。风险类型仅用于理财评估,请注意检查你购买和持有的产品是否会超出该风险</text>
			</view>
			<view class="box-1">
				<text>"</text>
			</view>
		</view>
		<view class="Record-4">
			<navigator class="botton" url="#" @tap="affirm">确认风评</navigator>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapState
	} = createNamespacedHelpers(
		"user"
	);
	export default {
		data() {
			return {
				data: [`收益需求`, `实际风险承受`, `心里风险承受`, `流动需求`],
				index: 60
			}
		},

		computed: {
			...mapState([`risk`])
		},
		methods: {
			affirm() {
				uni.switchTab({
					url:"../home/Home"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.Record {
		width: 750rpx;
		padding: 0rpx 40rpx;
		box-sizing: border-box;

		.Record-1 {
			width: 100%;
			height: 200rpx;

			font-size: 60rpx;
			font-weight: 800;
			line-height: 200rpx;
			color: #3a6af6;
		}

		.Record-2 {
			width: 100%;
			height: 300rpx;

			.Record-2-1 {
				width: 100%;
				height: 25%;
				display: flex;

				.WZ-1 {
					padding-right: 40rpx;
					line-height: 80rpx;
					width: 30%;
					height: 100%;
					text-align-last: justify;
				}

				.JD-2 {
					padding-top: 25rpx;
					width: 70%;
					height: 100%;

				}
			}
		}

		.Record-3 {
			margin-top: 40rpx;
			width: 100%;
			height: 200rpx;

			display: flex;

			.box-1 {
				width: 10%;
				height: 100%;

				font-size: 60rpx;
				font-weight: 700;
				color: #3a6af6;
				text-align: center;
			}

			.box-2 {
				width: 80%;
				height: 100%;

			}
		}

		.Record-4 {
			width: 100%;
			height: 200rpx;

			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.botton {
				width: 80%;
				height: 50%;
				font-size: 60rpx;
				font-weight: 800;
				color: #FFFFFF;
				line-height: 100rpx;
				border-radius: 15rpx;
				text-align: center;
				background-color: #3a6af6;
			}

			.wz-1 {
				width: 80%;
				height: 50%;
				text-align: center;
				font-size: 35rpx;
				color: #3a6af6;
				line-height: 100rpx;
			}
		}
	}
</style>
